<template>

    {{route.query.price}}

    {{route.query.orderNo}}

    <div>
        <div class="box">
            <div class="hd">
                <i class="iconfont icon-xiangzuojiantou"></i>
                <div>

                    支付中心
                </div>
            </div>

            <div class="sub">
                <div class="name">需支付</div>
            </div>

            <div class="price">
                ￥<span>{{route.query.price}}</span> <i class="iconfont icon-jinggao"></i>

                <p>请在30分钟内支付，超时订单将取消</p>
            </div>

            <div class="txt">
                <p> 支付方式</p>
            </div>

            <div class="card">

                <div class="pay_item isTop">
                    <div class="one">
                        <img src="https://dfs.zuchecdn.com/visit/carmktmis/g/V3/5f2b449255f94f4d90fa77c1983cd8fa.png"
                             alt="">
                    </div>

                    <div class="two">
                        支付宝
                        <p>首单随机立减</p>
                    </div>
                    <div class="three">
                        <i class="iconfont icon-duigoutianchong-" @click="zhifuBao()"
                           :class="{ yellow1: yellow1 }"
                        ></i>
                    </div>
                </div>
                <div class="pay_item">
                    <div class="one">
                        <img src="https://dfs.zuchecdn.com/visit/carmktmis/g/V3/0ac1494af1b74a12b09f45fa86c60be5.png"
                             alt="">
                    </div>

                    <div class="two wei_right">
                        微信支付
                    </div>
                    <div class="three">
                        <i class="iconfont icon-duigoutianchong-" @click="weixin()"
                           :class="{ yellow2: yellow2 }"></i>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="fd">
        <el-button type="primary" class="king" @click="king">去支付￥{{route.query.price}}</el-button>
    </div>
</template>

<script setup>
    import {ref, reactive} from "vue"
    import {useRoute} from 'vue-router'
    import axios from 'axios'

    const route = useRoute()
    const yellow1 = ref(false)
    const yellow2 = ref(false)

    const zhifuBao = () => {
        yellow1.value = !yellow1.value
        yellow2.value = false
    }

    const weixin = () => {
        yellow2.value = !yellow2.value
        yellow1.value = false
    }


    const king = () => {
        window.location.href = "http://192.168.191.97:8080/alipay/pay?orderNo=" + Number(route.query.orderNo)
    }

</script>

<style scoped lang="scss">
    .box {
        height: 1000px;
        background-color: #F5F5F5;

        .hd {
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
            width: 1010px;

            text-align: center;
            margin-right: 11px;
            font-size: 29px;
        }

        .icon-xiangzuojiantou {
            font-size: 20px;
            margin-left: 200px;
            margin-top: 2px;
        }

    }

    .sub {

        height: 50px;
        font-size: 30px;
        text-align: center;
        margin-top: 30px;
    }

    .name {
        position: relative;
    }

    .name:before {
        content: "";
        position: absolute;
        top: 46%;
        left: 889px;
        width: 14.173333rem;
        height: 4px;
        background: linear-gradient(-90deg, #979797, transparent 90%);
        transform: translate(-100%, 2px);
    }

    .name:after {
        top: 45%;
        right: 47%;
        transform: translate(100%, 2px);
        background: linear-gradient(90deg, #979797, transparent 90%);
        content: "";
        position: absolute;

        width: 14.173333rem;
        height: 4px;
    }

    .price {
        text-align: center;
        margin-top: 20px;
        font-weight: 700;
        font-size: 30px;

        span {
            font-size: 40px;
        }

        .icon-jinggao {
            position: relative;
            top: 1px;
            color: skyblue;
            right: 3px;
        }

        p {
            font-size: 18px;
            color: rgba(0, 0, 0, .46);
            font-weight: 400;
            margin-top: 30px;
        }
    }

    .txt {
        padding: 20px 20px;
        font-size: 20px;
        color: #333333;

        p {
            padding-bottom: 10px;
            border-bottom: 2px solid #DDDDDD;
        }
    }

    .card {
        height: 200px;
        margin-left: 5%;
        width: 90%;
        background-color: #fff;
        border-radius: 10px;
        border-top: .02666667rem solid #ddd;
        border-bottom: .02666667rem solid #ddd;
    }

    .card {
        height: 298px;

        .pay_item {
            padding: 20px 50px;
            display: flex;
            justify-content: space-between;

            .one {
                img {
                    background: transparent;
                    width: 50px;
                    margin-top: 12px;
                }
            }

            .two {
                position: relative;
                right: 672px;
                font-size: 35px;

                p {
                    color: #999;
                    font-size: 20px;
                }
            }

            .three {
                .icon-duigoutianchong- {
                    font-size: 50px;
                    margin-top: 25px;
                    color: #ddd;
                }
            }

        }
    }

    .isTop {
        border-bottom: .02666667rem solid #ddd;
    }

    .fd {
        box-shadow: 0 -.05333333rem .42666667rem 0 rgba(14, 86, 127, .09);
        width: 100%;
        height: 150px;
        background-color: #fff;
        position: fixed;
        z-index: 3;
        bottom: 0;
        left: 0;

        .king {
            width: 90%;
            margin: 5%;
            height: 90px;
            line-height: 90px;
            position: relative;
            bottom: 50px;
            margin-bottom: 100px;
            background-color: #375EDC;
            color: black;
            font-weight: 700;
            font-size: 35px;
            border: none;

        }
    }

    .wei_right {
        position: relative;
        right: 1px;
        top: 11px;
    }

    .yellow1 {
        color: #375EDC !important;
    }

    .yellow2 {
        color: #375EDC !important;
    }
</style>
